<template>
  <item-add text="添加成果" url="/results/add"></item-add>
  <div class="grid">
    <el-tabs v-model="type" @tab-click="handleClick">
      <el-tab-pane label="学生竞赛" name="studentCom">
      </el-tab-pane>
      <el-tab-pane label="社会服务" name="studentPro">
      </el-tab-pane>
      <el-tab-pane label="专利论文" name="studentPaper">
      </el-tab-pane>
    </el-tabs>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="name" label="成果名称" align="center"></el-table-column>
      <el-table-column prop="stuname" label="参与人员" align="center"></el-table-column>
      <el-table-column label="成果图片" align="center">
        <template #default="props">
          <img :src="props.row.imagelogo" alt="" style="width: 100px;height: 100px">
        </template>
      </el-table-column>
      <el-table-column prop="time" label="操作" align="center">
        <template #default="props">
          <el-button type="success" size="mini" @click="editData(props.row)" plain>修改</el-button>
          <el-button type="danger" size="mini" @click="deleteData(props.row.id)" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="fenye utils-flex-Justcenter">
      <el-pagination
          background
          layout="prev, pager, next"
          @current-change="pageinationChange"
          page-size="5"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import itemAdd from "../../components/itemAdd.vue";
import {inject, onMounted, reactive, toRefs, ref, unref} from "vue";
import {ElMessage,ElMessageBox} from 'element-plus';
import { useRouter } from 'vue-router';


export default {
  name: "index",
  components: {itemAdd},
  setup() {
    const data = reactive({
      type: "studentCom",
      queryInfo: { // 查询参数
        page: 1,
        limit: 5,
        type: "studentCom"
      },
      total: 0,
      tableData: [],

    })
    onMounted(async () => {
      queryData()
    })
    const $http = inject("$http")
    const router = useRouter()

    const handleClick = (tab, event) => {
      data.queryInfo.type = data.type
      data.queryInfo.page = 1
      queryData()
    }
    const queryData = async () => {
      const res = await $http.unityInfo.achievementList(data.queryInfo)
      data.tableData = res.result.result
      data.total = res.result.count
      console.log(res)
    }
    const deleteData = (id) => {
      ElMessageBox.confirm('此操作将永久删除该人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await $http.unityInfo.deleteAchievement(id)
        ElMessage.success(res.msg);
        queryData()
      }).catch(() => {
        ElMessage.info({
          message: '已取消删除'
        });
      });
    }

    const editData = (row) => {
      // data.id = row.id;
      router.push({
        path: "/results/add",
        query: {
          action: JSON.stringify(row)
        },
      })
    }
    const pageinationChange = (val) => {
      data.queryInfo.type = data.type
      data.queryInfo.page = val
      queryData()
    }
    return {
      ...toRefs(data),
      handleClick,
      editData,
      deleteData,
      pageinationChange
    }
  }
}
</script>

<style scoped lang="less">
.grid {

}
</style>